<template>
    <div class="map" ref="map">
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
// 引入中国地图的json数组
import ChinaJson from './china.json';
let map = ref()
// 注册中国地图
echarts.registerMap('china', ChinaJson as any);
onMounted(() => {
    let myechart = echarts.init(map.value)
    myechart.setOption({
        // 地图组件
        geo: {
            // 注册的地图名称
            map: 'china',
            // 鼠标缩放效果
            roam: true,
            // 地图位置
            left: 70,
            right: 70,
            top: 80,
            // 地图文字显示
            label: {
                show: true,
                color: '#fff'
            },
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'red' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'blue' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        },
        series: [
            {
                // 航线系列
                type: 'lines',
                data: [{
                    coords: [
                        [116.4052, 39.9049],  // 起点
                        [119.3062, 26.0763],   // 终点
                    ],
                    lineStyle: {
                        color: 'skyblue',
                        width: 5,
                        type: 'dotted'
                    },
                }, {
                    coords: [
                        [114.502461, 38.045474],
                        [91.132212, 29.660361]
                    ],
                    lineStyle: {
                        color: 'skyblue',
                        width: 5,
                        type: 'dotted'
                    },
                }
                ],
                effect: {
                    show: true,
                    symbol: 'arrow',
                    symbolSize: 20,
                    roundTrip: true,
                }
            }
        ]
    })
})
</script>

<style scoped></style>